PrimeVue is a UI framework that’s compatible with Vue 3.
In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.
Button Group Multiple Selections
We can add a button group with multiple selections.
For instance, we can write:
<template>
<div>
<SelectButton
v-model="selectedCity"
:options="cities"
optionLabel="name"
multiple
/>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
selectedCity: null,
cities: [
{ name: "London", code: "LND" },
{ name: "Paris", code: "PRS" },
{ name: "Rome", code: "RM" },
],
};
},
methods: {},
};
</script>
We add the multiple prop to enable multiple selections.
Also, we can customize the items displayed by populating the option slot:
<template>
<div>
<SelectButton
v-model="selectedCity"
:options="cities"
optionLabel="name"
multiple
>
<template #option="slotProps">
<div>
<b>{{ slotProps.option.name }}</b>
</div>
</template>
</SelectButton>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
selectedCity: null,
cities: [
{ name: "London", code: "LND" },
{ name: "Paris", code: "PRS" },
{ name: "Rome", code: "RM" },
],
};
},
methods: {},
};
</script>
We get the option data from theslotProps.option slot.
Slider
PrimeVue comes with a slider input component.
For instance, we can write:
main.js
import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import Slider from 'primevue/slider';
import 'primevue/resources/primevue.min.css'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css';
const app = createApp(App);
app.use(PrimeVue);
app.component("Slider", Slider);
app.mount("#app");
App.vue
<template>
<div>
<Slider v-model="value" />
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 0,
};
},
methods: {},
};
</script>
We add the Slider component and we bind the selected value to the value reactive property with v-model .
Also, we can change it to a range slider with the range prop:
<template>
<div>
<Slider v-model="value" range />
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: [20, 80],
};
},
methods: {},
};
</script>
We can set the range slider to display vertically with the orientation prop:
<template>
<div>
<Slider v-model="value" orientation="vertical" />
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 0,
};
},
methods: {},
};
</script>
And we can snap the slider value to the nearest increment with the step prop:
<template>
<div>
<Slider v-model="value" :step="20" />
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 0,
};
},
methods: {},
};
</script>
Also, we can set the min and max values with the min and max props:
<template>
<div>
<Slider v-model="value" :step="20" :min="50" :max="200" />
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 0,
};
},
methods: {},
};
</script>
Conclusion
We can add button groups that allow multiple selections and sliders into our Vue 3 app with PrimeVue.
